import {ActionType, StatisticCard} from '@ant-design/pro-components';
import RcResizeObserver from 'rc-resize-observer';
import React, {useState} from 'react';

const imgStyle = {
  display: 'block',
  width: 42,
  height: 42,
};
type ModelProps = {
  statisticCards: API.StatisticCardsDTO | undefined,
}
const StatisticCards: React.FC<ModelProps> = ({statisticCards}) => {
  const [responsive, setResponsive] = useState(false);
  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
        <StatisticCard
          bordered={true}
          statistic={{
            title: '产线规划人数',
            value: statisticCards?.planningNumber,
            suffix: "人",
            icon: (
              <img
                style={imgStyle}
                src="/icon_lasw9zewqef/icon_statisticCard/a-008_shalaqingshi.png"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          bordered={true}
          statistic={{
            title: '开班时长',
            value: statisticCards?.workTime,
            suffix: "时",
            icon: (
              <img
                style={imgStyle}
                src="/icon_lasw9zewqef/icon_statisticCard/a-008_pisaxican.png"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          bordered={true}
          statistic={{
            title: ' 当日计划出勤',
            value: statisticCards?.planningAttendanceNumber,
            suffix: "人",
            icon: (
              <img
                style={imgStyle}
                src="/icon_lasw9zewqef/icon_statisticCard/a-008_jituizhaji-13.png"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          bordered={true}
          statistic={{
            title: '实际出勤',
            value: statisticCards?.actualAttendanceNumber,
            suffix: "人",
            icon: (
              <img
                style={imgStyle}
                src="/icon_lasw9zewqef/icon_statisticCard/a-008_xuegaobingbang.png"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          bordered={true}
          statistic={{
            title: '当班产线效率',
            value: statisticCards?.actualEfficiency && Number((statisticCards?.actualEfficiency * 100).toFixed(2)),
            suffix: "%",
            icon: (
              <img
                style={imgStyle}
                src="/icon_lasw9zewqef/icon_statisticCard/a-008_mifenmiantiao.png"
                alt="icon"
              />
            ),
          }}
        />
      </StatisticCard.Group>
    </RcResizeObserver>
  );
};

export default StatisticCards;
